{% extends 'headbar.html' %}
{% load staticfiles %}
{% block main_content %}
    <div class="container">
        <div class="row ">
            <div class="col-md-10 col-md-offset-1 well ">
                <div class="col-md-12 column">
                    <div class="row ">
                        <div class="col-md-3 text-center">
                            <h3 class="text-primary ">{{ profile.user.nickname }}</h3>
                            {% autoescape off %}
                                {{ profile.user.profile }}
                            {% endautoescape %}
                        </div>
                        <div class="col-md-9 ">
                            <div class="row ">

                                <form class="form-horizontal">
                                    <div class="col-md-5 column">
                                        <div style="margin-top: 4%"></div>
                                        <div class="row">
                                            <div class="col-xs-2 col-xs-offset-2">
                                                <div class="form-group ">
                                                    <div class="radio">
                                                        <label><input type="radio" name="sex" value="男"
                                                                {% if profile.user.sex == False %}
                                                                      checked
                                                                {% endif %}
                                                        />男</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-2">
                                                <div class="form-group ">
                                                    <div class="radio">
                                                        <label><input type="radio" name="sex" value="女"
                                                                {% if profile.user.sex %}
                                                                      checked
                                                                {% endif %}
                                                        />女</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-10">
                                                <textarea id="self_description" class="form-control" rows="1"
                                                          placeholder="个性签名">{{ profile.user.self_description }}</textarea>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-10">
                                                <input id="mobile" type="text" class="form-control" placeholder="手机号"
                                                       value="{{ profile.user.mobile }}"/>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-md-5 column">
                                        {#                                        <div style="margin-top: 28%"></div>#}
                                        <div class="form-group">
                                            <div class="col-sm-10">
                                                <input id="email" type="text" class="form-control" placeholder="邮箱"
                                                       value="{{ profile.user.email }}"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-10">
                                                <input id="oldPwd" type="password" class="form-control"
                                                       placeholder="旧密码"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-10">
                                                <input id="newPwd" type="password" class="form-control"
                                                       placeholder="新密码"/>
                                            </div>
                                        </div>

                                    </div>
                                    {% if profile.user.id == client.id %}
                                        <div class="col-md-2 column ">
                                            <div style="margin-top: 100%"></div>
                                            <button class="btn btn-primary" type="button" id="submitChange">提交修改
                                            </button>
                                        </div>
                                    {% endif %}
                                </form>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-1 well ">
                <div class="tabbable" id="tabs-723316">
                    <ul class="nav nav-pills">
                        <li class="active">
                            <a href="#ANS" data-toggle="tab">回答</a>
                        </li>
                        <li>
                            <a href="#QUES" data-toggle="tab">提问</a>
                        </li>
                        <li>
                            <a href="#FOLLOWING" data-toggle="tab">我关注谁</a>
                        </li>
                        <li>
                            <a href="#FOLLOWED" data-toggle="tab">谁关注我</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="ANS">
                            <ul class="list-group">
                                {% for ans in profile.answers %}

                                    <li class="list-group-item">
                                        <a href="/article/?qid={{ ans.id }}" class="list-group-item "
                                           style="background-color:{% cycle '#f2dede'  '#fcf8e3' '#d9edf7' %};">{{ ans.title }}
                                            <br>
                                            <small style="color: gray">{{ ans.date_publish|date:'M  j号 Y年' }}</small>
                                        </a>
                                    </li>
                                {% endfor %}

                            </ul>
                        </div>
                        <div class="tab-pane" id="QUES">
                            <ul class="list-group">
                                {% for ques in profile.questions %}

                                    <li class="list-group-item">
                                        <a href="/article/?qid={{ ques.id }}" class="list-group-item "
                                           style="background-color:{% cycle '#f2dede'  '#fcf8e3' '#d9edf7' %};">{{ ques.title }}
                                            <br>
                                            <small style="color: gray">{{ ques.date_publish|date:'M  j号 Y年' }}</small>
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                        <div class="tab-pane" id="FOLLOWING">
                            {% for pro in profile.following_list %}
                                <ul class="list-group">
                                    <li class="list-group-item">
                                        <div class="row">
                                            <div class="col-md-3">
                                                {% autoescape off %}
                                                    {{ pro.profile }}
                                                {% endautoescape %}
                                            </div>
                                            <div class="col-md-6">
                                                <div class="row">
                                                    <h4><a href="/profile/?uid={{ pro.id }}">{{ pro.nickname }}</a></h4>
                                                </div>
                                                <div class="row">
                                                    <p style="color: gray">{{ pro.self_description }}</p>
                                                </div>
                                                {#                                                <div class="row">#}
                                                {#                                                    <h5 style="color: gray;">15 回答 2文章 10121关注者</h5>#}
                                                {#                                                </div>#}
                                            </div>
                                            <div class="col-md-3">
                                                <div class="row" style="margin-top: 15%;"></div>
                                                {% if pro.id in followId_list %}
                                                    <button type="button" class="btn btn-primary">取消关注</button>
                                                {% else %}
                                                    <button type="button" class="btn btn-primary">关注</button>
                                                {% endif %}
                                            </div>
                                        </div>

                                    </li>
                                </ul>
                            {% endfor %}
                        </div>

                        <div class="tab-pane" id="FOLLOWED">
                            {% for pro in profile.followed_list %}
                                <ul class="list-group">
                                    <li class="list-group-item">
                                        <div class="row">
                                            <div class="col-md-3">
                                                {% autoescape off %}
                                                    {{ pro.profile }}
                                                {% endautoescape %}
                                            </div>
                                            <div class="col-md-6">
                                                <div class="row">
                                                    <h4><a href="/profile/?uid={{ pro.id }}">{{ pro.nickname }}</a></h4>
                                                </div>
                                                <div class="row">
                                                    <p style="color: gray">{{ pro.self_description }}</p>
                                                </div>
                                                {#                                                <div class="row">#}
                                                {#                                                    <h5 style="color: gray;">15 回答 2文章 10121关注者</h5>#}
                                                {#                                                </div>#}
                                            </div>
                                            <div class="col-md-3">
                                                <div class="row" style="margin-top: 15%;"></div>
                                                {% if pro.id in followId_list %}
                                                    <button type="button" class="btn btn-primary">取消关注</button>
                                                {% elif pro.id != client.id %}
                                                    <button type="button" class="btn btn-primary">关注</button>
                                                {% endif %}
                                            </div>
                                        </div>

                                    </li>
                                </ul>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4  ">
                <div class="row well">
                    <div class="col-md-4 col-md-offset-2">
                        <button id="IFocusWho" type="button" class="btn btn-primary" href="#FOLLOWING"
                                data-toggle="tab">我关注了谁
                        </button>
                        <h4 class="text-center  ">{{ profile.following_count }}</h4>
                    </div>
                    <div class="col-md-4">
                        <button id="WhoFocusMe" type="button" class="btn btn-primary" href="#FOLLOWED"
                                data-toggle="tab">谁关注我
                        </button>
                        <h4 class="text-center  ">{{ profile.followed_count }}</h4>
                    </div>
                </div>
                <div class="row well">
                    <h4 class="text-center text-primary">联系我们 © 2017 QandA</h4>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('#IFocusWho').click(function () {
                $('ul li').removeClass('active')
                $('a[href="#FOLLOWING"]').parent().addClass('active')
            });
            $('#WhoFocusMe').click(function () {
                $('ul li').removeClass('active')
                $('a[href="#FOLLOWED"]').parent().addClass('active')
            });


            $('#submitChange').click(function () {

                $.ajax({
                    url: '{% url 'profile' %}',
                    type: 'get',
                    dataType: 'text',
                    data: {
                        'user_id': {{ client.id }},
                        'self_description': $('#self_description').val(),
                        'mobile': $('#mobile').val(),
                        'email': $('#email').val(),
                        'oldPwd': $('#oldPwd').val(),
                        'newPwd': $('#newPwd').val(),
                        'sex': $('input[type="radio"]:checked').val()
                    },
                    success: function (data) {
                        alert(data)
                    },
                    error: function () {
                        alert('出现错误!');
                    }
                });
            });
        });

    </script>
{% endblock %}